<template>
	<view class="Jy_group_barg_page"
		:style="tabsIndex == 0 ? 'background-color: #ff7500;' : 'background-color: #f83600;'">
		<view class="Jy_group_barg_box" :style="{'padding-top' : statusBarHeight + 'px'}">
			<view class="left-back-box" @click="getBack()">
				<u-icon name="arrow-left" color="#ffffff" size="26"></u-icon>
			</view>
			<!-- <view class="tabs_group">
				<view :class="tabsIndex == index ? 'tabs_box1' : 'tabs_box'" v-for="(item, index) in tabsList"
					:key="index" @click="getTabsChange(index)">
					<view class="tabs_text_box">
						<text>{{item.name}}</text>
					</view>
					<view class="line"
						:style="index == 0 ? 'background-color: #f83600;' : 'background-color: #ff7500;'"></view>
				</view>
			</view> -->
		</view>

		<view class="Jy_content_main_group">
			<scroll-view scroll-y="true" :style="{'height' : 'calc(100vh - ' + statusBarHeight + 'px - 80rpx);'}">
				<view class="Jy_content_main_boxs">

					<view class="active_kj_bg_image">
						<image src="https://f0.0sm.com/node0/2023/03/8640D5B0E7452E37-5eba29a7c82bb3d7.png"
							mode="widthFix"></image>
					</view>


					<!-- 砍价活动为空展示 -->
					<view class="">
						<view class="">
							<view class="">

							</view>
							<view class="">

							</view>
						</view>
					</view>



					<!-- 砍价信息 -->
					<view class="active2_cy_group">
						<text>已有</text>
						<text class="number">{{bargainTotal}}</text>
						<text>砍价成功</text>
					</view>
					<view class="Jy_content_main_shop_list" v-for="(item, index) in bargainList" :key="index">
						<view class="Jy_content_main_shop_container">
							<view class="left-image-box">
								<image :src="item.image" mode="aspectFill">
								</image>
							</view>
							<view class="right_content_group">
								<view class="shop_name_box">
									<text>{{item.title}}</text>
								</view>
								<view class="shop_down-time-box">

									<view class="down-time-box">
										<u-count-down :time="item.timeData" format="HH:mm:ss" autoStart millisecond
											@change="onChange">
											<view class="time">
												<view class="time__custom">
													<text
														class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
												</view>
												<text class="time__doc">:</text>
												<view class="time__custom">
													<text class="time__custom__item">{{ timeData.minutes }}</text>
												</view>
												<text class="time__doc">:</text>
												<view class="time__custom">
													<text class="time__custom__item">{{ timeData.seconds }}</text>
												</view>
											</view>
										</u-count-down>
										<text class="after-text">后结束</text>
									</view>
								</view>
								<view class="bar-button-group">
									<view class="news-price-box">
										<view class="new-price">
											<text class="symbal">￥</text>
											<text class="size">{{item.minPrice}}</text>
										</view>
									</view>
									<view class="button-group">

										<view class="kj-button-group">
											<view class="kj-button-box" @click="getBargainPage()">
												<text>参与砍价</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="not_moore_active_box">
						<text>没有更多活动了~</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 适配头部导航高度
				statusBarHeight: getApp().globalData.statusBarHeight,
				bgColor: {
					'bgColor': '#E93323',
					'Color': '#fff',
					'width': '44rpx',
					'timeTxtwidth': '16rpx',
					'isDay': true
				},
				timeData: {},
				dataTime: 0,
				bargainList: [],
				page: 1,
				limit: 10,
				loading: false,
				loadend: false,
				navH: '',
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				returnShow: true,
				loadTitle: '加载更多',
				bargainSuccessList: [],
				bargainTotal: 0,
				indicatorDots: false,
				autoplay: true,
			};
		},
		onLoad(option) {
			this.tabsIndex = option.index;
			this.getBargain()
			this.getBargainHeader()

		},
		methods: {

			getBargainHeader() {
				let that = this
				this.sendRequest({
					url: "/api/front/bargain/header",
					success: res => {
						this.bargainTotal = res.data.data.bargainTotal;
						this.bargainSuccessList = res.data.data.bargainSuccessList;
					}
				})

			},

			getBargain() {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = '';
				var data = {
					page: that.page,
					limit: that.limit
				};
				// 获取砍价商品
				this.sendRequest({
					url: "/api/front/bargain/list",
					data: data,
					// method: 'post',
					success: res => {
						let list = res.data.data.list;
						// let bargainList = that.$util.SplitArray(list, that.bargainList);
						let loadend = list.length < that.limit;
						that.loadend = loadend;
						that.loading = false;
						that.loadTitle = loadend ? '已全部加载' : '加载更多';
						for (var i = 0; i < list.length; i++) {
							list[i].timeData  = list[i].stopTime - new Date().getTime()
						}
						that.$set(that, 'bargainList', list);
						that.$set(that, 'page', that.page + 1);
					}
				})
			},


			// 返回上一页
			getBack() {
				uni.navigateBack();
			},
			// tabs切换
			getTabsChange(index) {
				this.tabsIndex = index;
			},
			// 秒杀倒计时变化
			onChange(e) {
				this.timeData = e
			},
			// 跳转到砍价操作页面
			getBargainPage() {
				uni.navigateTo({
					url: '/pagesH/main/customerHome/bargain/bargain'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'groupBargaining.scss';
</style>
